<template>
	<MainPage>
		<template v-slot:HeaderLeft>
			<el-form
				:inline="true"
				:model="form"
				class="demo-form-inline"
				ref="userListFrom"
				label-width="90px"
				id="form"
			>
				<el-form-item label="加工单号：" prop="order_sn">
					<el-input
						v-model="form.order_sn"
						placeholder="加工单号"
						class="wid220"
					></el-input>
				</el-form-item>
				<el-form-item label="工艺名称：" prop="name">
					<change-craft-input
						ref="searchCraftInput"
						@clear="clearCraftInput(1)"
						placeholder="工艺名称"
						@sendValue="(data) => getCraftInputData(data, 1)"
					></change-craft-input>
				</el-form-item>
				<el-form-item label="工艺状态：" prop="status">
					<el-select
						class="wid220"
						v-model="form.status"
						placeholder="工艺状态"
					>
						<el-option label="全部" value=""></el-option>
						<el-option
							v-for="(item, index) in status_list"
							:key="index"
							:label="item"
							:value="Number(index) + 1"
						></el-option>
					</el-select>
				</el-form-item>
				<MainFormBtn @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="moredata">
				</MainFormBtn>
				<div class="more el-form-item" @click="more">
					<span>更多</span>
					<i :class="[{ on: moredata }, ' el-icon-arrow-down']"></i>
				</div>
				<el-collapse-transition>
					<div v-show="moredata">
						<el-form-item label="创建时间：" prop="create_time">
							<el-date-picker
								v-model="create_time"
								type="daterange"
								class="time220"
								:editable="false"
								unlink-panels
								range-separator="至"
								start-placeholder="开始日期"
								end-placeholder="结束日期"
								value-format="yyyy-MM-dd"
								:clearable="false"
								@change="getArticleList"
							/>
						</el-form-item>
						<div class="clearfix"></div>
						<el-form-item label=" ">
							<MainFormBtn class="btn-bottom" @reset="reset" @getSearchFor="getArticleList" :loading="listLoading" :showBtn="!moredata">
							</MainFormBtn>
						</el-form-item>
					</div>
				</el-collapse-transition>
			</el-form>
			<div class="main-controls-wrap">
				<el-button @click="addCraftDialog = true"> 创建加工单</el-button>
			</div>
		</template>
		<template v-slot:HeaderRight>
		</template>
		<template v-slot:Table>
			<div style="min-height: 200px">
				<div class="main_table">
					<el-table
					ref="multipleTable"
					v-loading="listLoading"
					:data="list"
					element-loading-text="加载中"
					fit
					border
					highlight-current-row
				>
					<el-table-column
						label="加工单号"
						show-overflow-tooltip
						min-width="120"
						prop="order_sn"
					/>
					<el-table-column
						label="工艺名称"
						show-overflow-tooltip
						min-width="120"
						prop="formula.name"
					/>
					<el-table-column
						label="成品"
						show-overflow-tooltip
						prop="goods_name"
						min-width="120"
					/>
					<el-table-column
						label="加工数量"
						min-width="120"
						show-overflow-tooltip
						prop="process_num"
					/>
					<el-table-column
						label="已加工数量"
						min-width="120"
						show-overflow-tooltip
						prop="processed_num"
					/>
					<el-table-column
						label="未加工数量 "
						min-width="120"
						show-overflow-tooltip
						prop="processing_num"
					/>
					<el-table-column label="加工状态" min-width="120" prop="order_list">
						<template slot-scope="scope">
							<span :class="'status' + scope.row.status">
								{{ status_list[scope.row.status] }}
							</span>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" min-width="160" prop="order_list">
						<template slot-scope="scope">
							{{ parseTime(scope.row.created_at) }}
						</template>
					</el-table-column>
					<el-table-column
						label="操作"
						width="300"
						fixed="right"
						align="center"
						prop="order_list"
					>
						<template slot-scope="scope">
							<router-link :to="'/sorting/processOrder/see/' + scope.row.id">
								<el-link type="success">查看</el-link></router-link
							>
							<el-link
								type="warning"
								v-if="scope.row.status == 0 || scope.row.status == 1"
								@click="handleShowDialog(scope.row, 1)"
							>
								领料</el-link
							>

							<el-link
								type="info"
								v-if="scope.row.status == 1"
								@click="handleShowDialog(scope.row, 2)"
							>
								成品入库</el-link
							>
							<el-link
								type="info"
								v-if="scope.row.status == 2"
								@click="handleShowDialog(scope.row, 3)"
							>
								余料入库</el-link
							>
						</template></el-table-column
					>
					</el-table>
				</div>
			</div>
		</template>
		<template v-slot:Page>
			<MainPagination
				:current-page="current.page"
				:page-sizes="[20, 50, 100]"
				:page-size="limit"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalCount"
				background
				@size-change="changeLimit"
				@current-change="changePage"
			/>
		</template>
		<template v-slot:Dialog>
			<!-- 创建编辑加工单 -->
			<el-dialog
				title="创建加工单"
				:visible.sync="addCraftDialog"
				class="main_dialog dialog400"
				@closed="closeOrderDialog"
			>
				<el-form
					:inline="false"
					:model="craftInfo"
					class="demo-form-inline"
					ref="addCraftForm"
					label-width="80px"
					key="userListFrom1"
					:rules="rules"
				>
					<div>
						<el-form-item label="工艺名称" prop="fid">
							<change-craft-input
								ref="changeCraftInput"
								@clear="clearCraftInput(2)"
								@sendValue="(data) => getCraftInputData(data, 2)"
							></change-craft-input>
						</el-form-item>
						<el-form-item label="成品名称" prop="name">
							<el-input
								v-model="craftInfo.name"
								placeholder="成品名称"
								class="wid220"
								:disabled="true"
							></el-input>
						</el-form-item>
						<el-form-item label="成品数量" prop="process_num">
							<el-input
								v-model.trim="craftInfo.process_num"
								placeholder="成品数量"
								class="wid220"
							></el-input>
						</el-form-item>
					</div>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button
						type="primary"
						:loading="saveloading"
						@click="preserve"
						v-repeatClick
						>保存</el-button
					>
					<el-button @click="addCraftDialog = false">取消</el-button>
				</div>
			</el-dialog>
			<!-- 领料 -->
			<process-order-pick-goods
				:id="getMaterielID"
				:showDialog.sync="getMaterielDialog"
				ref="getMaterielDialog"
				@refresh="getArticleList"
			></process-order-pick-goods>
			<!-- 成品入库 -->
			<process-order-product-storage
				:showDialog.sync="productStorage"
				ref="productStorage"
				:form="productStorageForm"
				@refresh="getArticleList"
			></process-order-product-storage>
			<!-- 余料入库 -->
			<process-order-stock-inventory
				:id="stockInventoryID"
				:showDialog.sync="stockInventory"
				ref="stockInventoryDialog"
				@refresh="getArticleList"
			></process-order-stock-inventory>
		</template>
	</MainPage>
</template>
<script>
	import MainPage from "@/components/MainPage";
	import changeCraftInput from "@/views/sorting/components/changeCraftInput";
	import processOrderPickGoods from "@/views/sorting/components/processOrderPickGoods";
	import ProcessOrderProductStorage from "./components/processOrderProductStorage.vue";
	import processOrderStockInventory from "./components/processOrderStockInventory.vue";
	import { recursion, category, parseTime, getyesterday } from "@/utils/index";
	import {
		process_index,
		process_getFormula,
		process_add,
	} from "@/api/sorting/processOrder";

	import rules from "@/rules/sorting/processOrder";

	export default {
		components: {
			MainPage,
			changeCraftInput,
			processOrderPickGoods,
			ProcessOrderProductStorage,
			processOrderStockInventory,
		},
		data() {
			return {
				parseTime,
				rules,
				form: {
					start_time: "",
					end_time: "",
					order_sn: "",
					status: "",
					fid: "",
				},
				create_time: [],
				listLoading: false,
				moredata: false,
				list: [],
				status_list: [],
				// 分页
				current: {
					page: 1,
					per_page: 20,
				},
				limit: 20,
				totalCount: 1,

				//  新增工艺
				addCraftDialog: false,
				saveloading: false,
				craftInfo: {
					fid: "",
					name: "",
					process_num: "",
				},
				// 领料
				getMaterielDialog: false,
				getMaterielID: "",
				//成品入库
				productStorage: false,
				productStorageForm: {
					name: "",
					process_num: "",
					processed_num: "",
					processing_num: "",
					num: "",
					cost: "",
					id: "",
				},
				// 余料入库
				stockInventory: false,
				stockInventoryID: "",
			};
		},
		created() {
			this.process_index();
		},
		methods: {
			more() {
				this.moredata = !this.moredata
			},
			// 搜索
			getArticleList() {
				this.current.page = 1;
				this.process_index();
			},
			//重置
			reset() {
				this.$refs["userListFrom"].resetFields();
				if (this.$refs["searchCraftInput"]) {
					this.$refs["searchCraftInput"].name = "";
				}
				this.create_time = [];
				this.form.fid = "";
				this.getArticleList();
			},
			// 分页
			changeLimit(pageSize) {
				this.current.per_page = pageSize;
				this.process_index();
			},
			changePage(page) {
				this.current.page = page;
				this.process_index();
			},
			process_index() {
				this.listLoading = true;
				this.form.start_time = this.create_time ? this.create_time[0] : "";
				this.form.end_time = this.create_time ? this.create_time[1] : "";
				let data = Object.assign(this.form, this.current);
				process_index(data).then((res) => {
					if (res.errcode == 0) {
						this.status_list = res.data.status_list;
						res.data.list.data.map((e) => {
							e.goods_name = e.goods.name;
							try {
								e.goods_name = `${e.goods_name}【${e.spu.spu_name.title}】`;
							} catch (error) {
								console.error(error);
							}
						});
						this.list = res.data.list.data;
						this.totalCount = res.data.list.total;
						this.listLoading = false;
					} else {
						this.$message.error(res.errmsg);
					}
				});
			},
			// 编辑
			handleEdit() {
				this.$message.success("编辑");
			},
			// 删除
			handleDelete() {
				this.$message.warning("删除");
			},
			clearCraftInput(type) {
				switch (type) {
					case 1:
						if (this.$refs["searchCraftInput"]) {
							this.$refs["searchCraftInput"].name = "";
						}
						break;

					case 2:
						if (this.$refs["changeCraftInput"]) {
							this.$refs["changeCraftInput"].name = "";
						}
						this.craftInfo.name = "";
						break;
				}
			},
			getCraftInputData(data, type) {
				switch (type) {
					case 1:
						this.form.fid = data.id;
						break;

					case 2:
						this.craftInfo.fid = data.id;
						this.craftInfo.name = data.goods.name;
						this.$nextTick(() => {
							this.$refs["addCraftForm"].clearValidate(["fid", "name"]);
						});
						break;
				}
			},
			closeOrderDialog() {
				this.craftInfo = {
					fid: "",
					name: "",
					process_num: "",
				};
				if (this.$refs["changeCraftInput"]) {
					this.$refs["changeCraftInput"].name = "";
				}
			},
			// 保存新增
			preserve() {
				this.$refs["addCraftForm"].validate((valid) => {
					if (valid) {
						this.saveloading = true;
						let data = {
							fid: this.craftInfo.fid,
							process_num: this.craftInfo.process_num,
						};
						process_add(data).then((res) => {
							if (res.errcode == 0) {
								this.process_index();
								this.$message.success("新增成功");
								this.addCraftDialog = false;
							} else {
								this.$message.error(res.errmsg);
							}
							this.saveloading = false;
						});
					}
				});
			},
			// 弹窗
			handleShowDialog(row, type) {
				switch (type) {
					case 1:
						this.getMaterielID = row.id;
						this.getMaterielDialog = true;
						this.$nextTick(() => {
							this.$refs["getMaterielDialog"].process_getList();
						});

						break;
					case 2:
						this.productStorageForm.name = row.goods.name;
						this.productStorageForm.process_num = row.process_num;
						this.productStorageForm.processed_num = row.processed_num;
						this.productStorageForm.processing_num = row.processing_num;
						this.productStorageForm.cost = row.cost;
						this.productStorageForm.id = row.id;
						this.productStorageForm.status = row.status;
						this.productStorageForm.num = row.processing_num;
						this.$nextTick(() => {
							this.productStorage = true;
						});

						break;
					case 3:
						this.stockInventoryID = row.id;
						this.stockInventory = true;
						this.$nextTick(() => {
							this.$refs["stockInventoryDialog"].process_getList();
						});
						break;
				}
			},
		},
	};
</script>
<style lang='scss' scoped>
.el-form-item {
	margin-bottom: 10px;
}
.textarea {
	width: 280px;
	>>> .el-textarea__inner {
		height: auto;
	}
}
.add_goods_container {
	display: flex;
	align-items: center;
	padding: 0 0 0 0px;
	li {
		display: flex;
		align-items: center;
		span {
			padding-right: 10px;
			display: block;
			width: 80px;
			text-align: right;
			em {
				padding: 0 5px;
				color: red;
			}
		}
		.width60 {
			width: 60px;
		}
		&:last-child {
			margin-left: 10px;
		}
	}
}
>>> .table_container .el-table--small td .cell {
	height: auto;
}
/deep/.main_dialog .el-dialog {
	margin-top: 15vh !important;
}
.status0 {
	color: #f56c6c;
}
.status1 {
	color: #03a98e;
}
.status2 {
	color: #e6a23c;
}
.status3 {
	color: #909399;
}
.textarea {
	width: 280px;
	>>> .el-textarea__inner {
		height: auto;
	}
}
</style>
